<!--/**
 * @Author gotomars
 * @Description fix bug
 * @Date 16:01 2020/11/26
 **/-->
<template>

    <div class="clientMess-box">
        <div class="container">

            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    :error.sync="error"
                    error-text="数据获取失败，点击重新加载"
                    offset="50"
                    v-model="loading"
                    :finished="finished"
                    @load="getData"
                >
                    <div class="clientMess-demo clientMess-demo1" v-for="item in dataList">
                        <div class="date" @click="toDetail(item)">
                            <slot v-bind:row="item">
                                <strong v-if="titleKey">{{ item[titleKey] }}</strong>
                            </slot>
                        </div>
                        <ul class="ul_tp comm_ul" @click="toDetail(item)">
                            <li v-for="field in cols.show">
                                <span class="txt">{{ field.title }}</span>
                                <span class="infos" :class="field.class">{{ item[field.field] }}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="box-bt" v-if="finished">
                        <span>没有更多了</span>
                    </div>
                </van-list>
            </van-pull-refresh>

        </div>
    </div>
</template>
<script>
import {pageGetDataList} from "./util";

export default {
    watch: {
        listCond: {
            handler(newValue, oldValue) {
                console.log(this.listCond)
                this.onRefresh();
            },
            deep: true
        }
    },
    props: ["url", "titleKey", "cols", "listCond", "titleKey"],
    name: "m_pageList",
    data: function () {
        return {
            dataList: [],
            error: false,
            refreshing: false,
            finished: false,
            currentPage: 1,
            loading: true
        }
    },
    mounted() {
        this.getRandomBg();
        this.getData();
    },
    methods: {
        toDetail(item) {
            this.$emit("toDetail", item);
        },
        getRandomBg() {
            let min = 0, max = 3;
            let Range = max - min;
            let Rand = Math.random();
            let num = min + Math.round(Rand * Range); //四舍五入
            this.backgroundColor = ["purple", "", "red", "orange"][num];
        },
        initData() {
            this.error = false;
            this.currentPage = 1;
            this.finished = false;
            this.loading = true;
            this.dataList = [];
        },
        getData(cond) {
            let that = this;
            if (undefined == cond) {
                cond = that.listCond;
            }
            that.loading = true;
            pageGetDataList(this, {
                url: this.url,
                cond
            });
        },
        collapse(item) {
            if (item.show === true) {
                this.$set(item, "show", false);
            } else {
                this.$set(item, "show", true);
            }
        },
        onRefresh() {
            this.initData();
            this.getData();
        }
    }
}
</script>